<!--
 * @Description:鼠标跟随事件
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 18:26:02
 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>鼠标跟随事件</title>
	<style>
		#div1 {
			width: 200px;
			height: 200px;
			background: #ccc;
			position: absolute;
		}
	</style>

</head>
<script>
	window.onload = function () {
		function getPos(ev) {
			var scrollTop = document.documentElement.scrollTop ||
				document.body.scrollTop
			var scrollLeft = document.documentElement.scrollLeft||
				document.body.scrollLeft
				return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}
		}

		document.onmousemove = function (ev) {
			var oBtn = document.getElementById("btn1")
			var oDiv = document.getElementById("div1")
			var oEvent = ev || event
			var pos = getPos(oEvent )

			oDiv.style.left = pos.x+ 'px'
			oDiv.style.top = pos.y+ 'px'
		}

	}
</script>

<body>
	<div id="div1"></div>
</body>

</html>